import IconGlobal from '@/assets/svg/icon-global'
import IconAvatar from '@/assets/svg/icon_avatar'
import IconMenu from '@/assets/svg/icon_menu'
import React, { memo, useEffect, useState } from 'react'
import { RightWrapper } from './style'

const HeaderRight = memo(() => {
  const [ showPanel, setShowPanel] = useState(false)

  useEffect(() => {
    function windowHandleClick() {
      setShowPanel(false)
    }

    window.addEventListener('click', windowHandleClick, true) 
    //加true为设置捕获 阻止冒泡事件  在副作用代码里增加和移除监听
    return () => { 
      window.removeEventListener('click', windowHandleClick,true)
    }
  },[])

  // 点击弹出面板
  function profileClickHandle(){
    setShowPanel(true)
  }

  return (
    <RightWrapper>
      <div className='btns'>
        <span className='btn'>登录</span>
        <span className='btn'>注册</span>
        <span className='btn'>
          <IconGlobal/>
        </span>
      </div>

      <div className='profile' onClick={profileClickHandle}>
        <IconMenu/>
        <IconAvatar/>

        {/* 弹出面板 */}
        { showPanel && (
          <div className='panel'>
            <div className='top'>
              <div className='item register'>注册</div>
              <div className='item login'>登录</div>
            </div>
            <div className='bottom'>
              <div className='item'>出租房源</div>
              <div className='item'>开展体验</div>
              <div className='item'>帮助</div>
            </div>
          </div>
        )}

      </div>
    </RightWrapper>
  )
})

export default HeaderRight